<template lang="pug">
.cp-defect-trace
  el-dialog.dt-dialog(
    title="缺陷跟踪",
    :visible="visible",
    @close="closeDialog",
    width="60%")
    //- 查询
    el-form.dt-search(:inline="true")
      el-form-item
        el-input(v-model="name", placeholder="请输入ID/标题", style="width: 200px")
      el-form-item(label="状态 : ")
        el-select(v-model="status", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(v-for="(item, index) in statusSelect", :key="index", :label="item.name", :value="item.value")
      el-form-item(label="创建人 : ")
        el-select(v-model="creator", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(v-for="(item, index) in creatorSelect", :key="index", :label="item.name", :value="item.value")
      el-form-item(label="模块 : ")
        el-select(v-model="module", style="width: 100px")
          el-option-group(v-for="group in moduleSelect", :key="group.name", :label="group.name")
            el-option(v-for="item in group.options", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="优先级 : ")
        el-select(v-model="priority", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(v-for="(item, index) in prioritySelect", :key="index", :label="item.name", :value="item.value")
      el-form-item(label="严重程度 : ")
        el-select(v-model="severity", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(v-for="(item, index) in severitySelect", :key="index", :label="item.name", :value="item.value")
      el-form-item
        el-button(type="primary", @click="search") 搜索
    //- 列表
    .dt-table
      el-table(
        :data="defectTraceList",
        highlight-current-row
        height="398px"
        size="mini"
        v-loading="loadingData")
        el-table-column(show-overflow-tooltip, prop="id", label="ID")
        el-table-column(show-overflow-tooltip, prop="title", label="标题")
        el-table-column(show-overflow-tooltip, prop="status", label="状态")
        el-table-column(show-overflow-tooltip, prop="level", label="等级")
        el-table-column(show-overflow-tooltip, prop="creator", label="创建人")
        el-table-column(show-overflow-tooltip, prop="module", label="所属模块")
        el-table-column(show-overflow-tooltip, prop="priority", label="优先级")
        el-table-column(show-overflow-tooltip, prop="linkNeed", label="关联的需求")
        el-table-column(show-overflow-tooltip, prop="linkTest", label="关联的测试用例")
        el-table-column(label="操作")
    //- 分页
    el-pagination.dt-pagination(
      layout="total, prev, pager, next, jumper",
      @current-change="changeMaterielPage",
      :current-page.sync="pageNum",
      :page-size="pageSize",
      :background="true",
      :total="defectTraceListTotal")
    div(slot="footer", style="text-align: center;")
      el-button(type="primary", plain, @click="closeDialog") 关闭
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'defecttrace',
  props: {
    visible: Boolean
  },
  data() {
    return {
      name: null,
      status: null,
      creator: null,
      module: null,
      priority: null,
      severity: null,
      // 列表
      defectTraceList: [],
      defectTraceListTotal: 1,
      pageNum: 1,
      pageSize: 10,
      loadingData: true,
      // 搜索条件选项
      statusSelect: [
        { name: '新建', value: '1' },
        { name: '待评审', value: '2' },
        { name: '已评审', value: '3' },
        { name: '已发布', value: '4' },
        { name: '已执行', value: '5' }
      ],
      creatorSelect: [],
      moduleSelect: [{
        name: '系统',
        options: [{
          value: 'Q',
          name: '系统'
        }]
      }, {
        name: '模块A',
        options: [{
          value: 'A1',
          name: '模块A1'
        }, {
          value: 'A2',
          name: '模块A2'
        }]
      }, {
        name: '模块B',
        options: [{
          value: 'B1',
          name: '模块B1'
        }, {
          value: 'B2',
          name: '模块B2'
        }]
      }, {
        name: '模块C',
        options: [{
          value: 'C1',
          name: '模块C1'
        }, {
          value: 'C2',
          name: '模块C2'
        }]
      }],
      prioritySelect: [
        { name: '高', value: 'high' },
        { name: '中', value: 'mid' },
        { name: '低', value: 'low' }
      ],
      severitySelect: [
        { name: '致命', value: '1' },
        { name: '严重', value: '2' },
        { name: '中等', value: '3' },
        { name: '较小', value: '4' }
      ]
    };
  },
  computed: {
    ...mapGetters({})
  },
  methods: {
    closeDialog () {
      this.$emit('close');
    },
    // 整理参数
    filterParams () {
      const params = {
        name: this.name,
        status: this.status,
        creator: this.creator,
        module: this.module,
        priority: this.priority,
        severity: this.severity,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      for (const key in params) {
        if (params[key] === null || params[key] === '' || params[key] === undefined) {
          delete params[key];
        }
      }
      return params;
    },
    // 获取列表数据
    loadingList () {
      // const params = this.filterParams();
      this.loadingData = true;
      setTimeout(() => {
        this.defectTraceList = [];
        this.defectTraceListTotal = 0;
        this.loadingData = false;
      }, 500);
    },
    // 搜索
    search () {
      if (this.pageNum !== 1) {
        this.pageNum = 1;
      }
      this.loadingList();
    },
    // 分页
    changeMaterielPage (pageNum) {
      this.pageNum = pageNum;
      this.loadingList();
    }
  },
  mounted () {
    this.loadingList();
  }
};
</script>

<style lang="sass">
.cp-defect-trace
  .el-table
    th, td
      text-align: center
  .dt-dialog
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding: 16px
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .dt-search
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
      margin-bottom: 10px
    .el-form-item__label
      padding-right: 6px
  .dt-table
    margin-bottom: 12px
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
      th.gutter
        display: table-cell!important
  .dt-pagination
    text-align: center
</style>
